<template>
  <div class="lists">
    <div
      class="product"
      v-for="(item, index) in list.productList"
      :key="index"
      @click="fn_toDetail(item.productId)"
    >
      <img :src="item.imgSrc" alt="" />
      <p class="title">{{ item.title }}</p>
      <div class="price">
        <span class="newPrice">￥{{item.newPrice}}</span>
        <span class="pddPrice">拼多多价{{item.pddPrice}}元</span>
      </div>
    </div>
  </div>
</template>

<script>
// import instance from '../../api/request'
import axios from 'axios'
export default {
  name: 'Lists',

  data() {
    return {
      id: this.mess,
      productId: null,
      list: [],
    }
  },

  created() {
    this.fn_getData()
  },

  methods: {
    async fn_getData() {
      let { data } = await axios.get('./pdd.json')
      this.list = data.home.product.find((item) => {
        return (item.id == this.id)
      })
    },
    fn_toDetail(productId){
      location.href = `./detail.html?classId=${this.id}&productId=${productId}`
    }
  },
  props: ['mess'],
}
</script>

<style lang="less" scoped>
.lists {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: .02rem;
  .product {
    height: 5.7rem;
    width: 3.72rem;
    background: #fff;
    position: relative;
    img {
      width: 3.72rem;
      height: 3.72rem;
    }
    .title {
      width: 100%;
      overflow: hidden;
      height: .4rem;
      font-size: .26rem;
      line-height: .4rem;
      padding: 0 .2rem 0 0;
      color: #151516;
      word-break: break-all;
      margin: .1rem 0 .04rem .2rem;
    }
    .price {
      position: absolute;
      bottom: .22rem;
      height: .34rem;
      margin: .08rem 0 .04rem .2rem;
      display: flex;
      justify-content: space-between;
      color: #e02e24;
      .newPrice {
        font-weight: 500;
        line-height: .4rem;
        height: .34rem;
      }
      .pddPrice {
        height: .4rem;
        font-size: .22rem;
        border-radius: .16rem;
        padding: 0 .08rem;
        margin-left: .1rem;
        position:relative;
        margin-left: .1rem;
        border:1px solid #e02e24;
      }
    }
  }
}
</style>
